<template>
  <div class="hotel-order-detail">
    <v-header ref="header" title="订单详情"></v-header>
    <div class="main" ref="main">
      <div class="status">
        <p>{{orderInfo.orderStatusStr}}</p>
        <p class="status-tip">订单号：{{orderInfo.outTradeNo}}</p>
      </div>
      <div class="tips">
        <p class="tip-title">入住提示</p>
        <div class="tip-content">
          <label>办理入住</label>
          <p>到店后，凭手机号或者姓名确认预定的房间</p>
        </div>
        <div class="tip-content" v-if="orderInfo.orderGoodsList && orderInfo.orderGoodsList.length > 0">
          <label>入住时间</label>
          <p><span style="color: red;">{{orderInfo.orderGoodsList[0].effectiveDate}}</span>。请不要错过入住时间哦</p>
        </div>
        <div class="tip-content">
          <label>报销凭证</label>
          <p>如需要发票，可像酒店索取</p>
        </div>
      </div>
      <div class="box">
        <p class="title">
          到店支付
          <span class="price">￥{{orderInfo.totalAmount}}</span>
        </p>
        <div class="hotel" v-if="orderInfo.orderGoodsList && orderInfo.orderGoodsList.length > 0">
          <div class="thumb" v-lazy:backgroundImage="orderInfo.goodsImg"></div>
          <div class="info">
            <p class="name">{{orderInfo.goodsName}}</p>
            <p class="price">单价： <span>￥</span><span class="num">{{orderInfo.orderGoodsList[0].goodsPrice}}</span></p>
          </div>
          <div class="number">
            <p>X<span>{{orderInfo.orderGoodsList.length}}</span></p>
          </div>
        </div>
        <ul class="btns">
          <li @click="toComment" :class="{disabled: orderInfo.orderStatus !== 5 && orderInfo.commentStatus !== 0}">{{orderInfo.orderStatus === 1 ? '已评价' : '去评价'}}</li>
          <li @click="cancelOrder" :class="{disabled: orderInfo.orderStatus !== 0}">取消订单</li>
          <li @click="toOrderAgain">再次预定</li>
          <li @click="toHome">返回首页</li>
        </ul>
      </div>
      <div class="box">
        <p class="title">附近美食</p>
        <ul class="hotel-list" slot="content">
          <router-link v-for="item in foodList" :key="item.id" :to="`/foodDetailsOne/${item.id}?recommend=0`" tag="li">
            <div v-lazy:backgroundImage="item.thumbUrl" class="bg"></div>
            <p class="name">{{item.name}}</p>
            <p class="price">￥<span style="font-size: 15px; margin-right: 4px;">{{item.consumptionPerPerson}}</span></p>
          </router-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import { TransferDom, Popup } from 'vux'

import axios from '@/api/axiosApi'
import { isIphoneX } from '@/assets/js/brower'

const ORDER_STATUS = [
  {
    value: 0,
    label: '已预定,待确认',
    tip: ''
  },
  {
    value: 1,
    label: '已确认'
  },
  {
    value: 2,
    label: '取消中'
  },
  {
    value: 3,
    label: '已取消'
  },
  {
    value: 4,
    label: '取消失败'
  },
  {
    value: 5,
    label: '已完成'
  }
]
export default {
  name: 'HotelOrderDetail',
  data() {
    return {
      orderInfo: {},
      foodList: []
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader,
    Popup
  },
  created() {
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingBottom = 34
    }
    this._getOrderDetail()
  },
  mounted() {
    this.$refs.main.style.height = window.innerHeight - this.$refs.header.$el.offsetHeight + 'px'
  },
  methods: {
    _getOrderDetail() {
      axios.get(this, '/v1/order/' + this.$route.params.tradeNo, null, (data) => {
        const status = ORDER_STATUS.find(o => o.value === data.orderStatus)
        if (status) {
          data.orderStatusStr = status.label
        }
        this.orderInfo = data

        this._getFoodList(data.orderGoodsList[0].longitude, data.orderGoodsList[0].latitude)
      })
    },
    _getFoodList(longitude, latitude) {
      axios.get(this, '/v1/nearbyStoreFood', {
        storeNum: 3,
        longitude: longitude,
        latitude: latitude,
        distance: 30000
      }, (data) => {
        this.foodList = data
      })
    },
    toComment() {
      if (this.orderInfo == null || this.orderInfo.id == null) {
        return
      }
      if (this.orderInfo.orderStatus !== 5) {
        this.$vux.toast.text('需要完成订单过后才可以评论', 'middle')
        return
      }
      // 评论页面
      sessionStorage.setItem('outTradeNo', this.$route.params.tradeNo)
      sessionStorage.setItem('goodsImageEvalution', this.orderInfo.orderGoodsList[0].goodsImage)
      sessionStorage.setItem('goodsType', this.orderInfo.goodsType)
      this.$router.replace('/user/evalution/' + this.orderInfo.productId)
    },
    cancelOrder() {
      // 取消订单
      if (this.orderInfo.orderStatus !== 0) {
        this.$vux.toast.text(`该订单状态为“${this.orderInfo.orderStatusStr}，不可取消”`, 'middle')
        return
      }
      const _self = this
      this.$vux.confirm.show({
        title: '提示',
        content: '确定要取消该订单吗？',
        onConfirm () {
          axios.put(_self, `/v1/cancelOrder/${_self.$route.params.tradeNo}`, null, () => {
            _self.$vux.toast.text('取消订单成功', 'middle')
            _self._getOrderDetail()
          })
        }
      })
    },
    toOrderAgain() {
      // 再次下单
      this.$router.push('/hotel/' + this.orderInfo.orderGoodsList[0].goodsId)
    },
    toHome() {
      this.$router.replace('/')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.hotel-order-detail
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background-color $color-background
  z-index 100
.box
  background #ffffff
  margin-top 16px
  padding 20px 16px
.title
  color #333
  padding-bottom 20px
  line-height 1
  font-size 20px
  .more
    float right
  i
    font-size 24px
    color #999
    margin-left 8px
  .price
    color $color-theme
    font-size 21px
    margin-left 8px
.main
  overflow-x hidden
  overflow-y auto
  -webkit-overflow-scrolling touch
  -webkit-box-sizing border-box
.status
  font-size 28px
  color #fff
  line-height 1
  padding-top 16px
  padding-bottom 126px
  padding-left 16px
  background $color-theme
  .status-tip
    font-size 15px
    margin-top 16px
.tips
  background #fff
  border-radius 3px
  margin 0 16px
  overflow hidden
  padding 16px
  margin-top -100px
  line-height 1.6
  .tip-title
    font-size 17px
    color #333
    margin-bottom 16px
    line-height 1
  .tip-content
    display flex
    font-size 15px
    color #333
    margin-bottom 8px
    &:last-child
      margin-bottom 0
    label
      color #999
      margin-right 16px
      min-width 62px
.hotel
  display flex
  align-items center
  line-height 1
  .thumb
    width 94px
    height 70px
    background-size cover
    background-repeat no-repeat
    background-position center
    margin-right 8px
    border-radius 3px
  .info
    width calc(100% - 150px)
    .name
      height 45px
      font-size 16px
      color #333
      margin-bottom 6px
      line-height 1.4
      no-wrap-n(2)
    .price
      font-size 13px
      color #999
      span
        color $color-theme
      .num
        font-size 16px
  .number
    font-size 13px
    width 40px
    margin-left 8px
    text-align right
    color red
    span
      font-size 21px
      margin-left 4px
.btns
  display flex
  justify-content space-around
  margin 0 -16px
  margin-top 40px
  li
    width 23%
    height 38px
    line-height 38px
    text-align center
    color $color-theme
    border 0.5px solid $color-theme
    border-radius 3px
    background #ebfffd
  .disabled
    color #999
    border-color #999
    background #f5f5f5
.hotel-list
  display flex
  width 100%
  justify-content space-between
  li
    line-height 1
    margin-right 8px
    width calc((100vw - 48px) / 3)
    .bg
      width calc((100vw - 48px) / 3)
      height 82px
      border-radius 3px
      background-size cover
      background-position center
      background-repeat no-repeat
      box-shadow 0 0 8px #d0d0d0
    .name
      font-size 15px
      color #333
      margin-top 12px
      margin-bottom 8px
      no-wrap()
    .price
      font-size 12px
      color $color-theme
    .desc
      font-size 12px
      color #999
      no-wrap()
    &:last-child
      margin-right 0
</style>

